<template>
  <div class="app-container">
    <div class="flex-box">
      <div class="item">
        <el-button @click="addShow">添加推送</el-button>
      </div>

      <div class="item">
        <el-date-picker
          v-model="searchdate"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          @change="getList"
        />
      </div>

      <div class="item">
        <el-input v-model="searchcontent" placeholder="请输入推送标题">
          <el-button slot="append" icon="el-icon-search" @click="getList">搜索</el-button>
        </el-input>
      </div>
    </div>

    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%" class="no-r-b"
      :header-cell-style="{background:'#FAFAFA',color:'#666666'}">
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="推送标题">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="推送内容">
        <template slot-scope="scope">
          <span>{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="推送类型">
        <template slot-scope="scope">
          <span>{{ scope.row.type == '1' ? '群推' : scope.row.type == '2' ? '按会员等级推送' : '单用户推送' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="推送对象">
        <template slot-scope="scope">
          <span>{{ scope.row.toname }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建日期">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" icon="el-icon-edit" @click="editShow(scope.row)">编辑</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <!--列表数据添加/编辑开始  -->
    <el-dialog v-if="dialogFormVisible" :title="dialogTitle" :visible.sync="dialogFormVisible" center width="95%">
      <el-form ref="ruleForm" :model="formRow" label-width="70px">
        <el-form-item label="推送标题">
          <el-input v-model="formRow.title" placeholder="请输入推送标题" auto-complete="off" />
        </el-form-item>
        <el-form-item label="推送内容">
          <el-input type="textarea" :rows="5" v-model="formRow.content" placeholder="请输入推送内容" auto-complete="off" />
        </el-form-item>
        <el-form-item label="推送类型">
          <el-radio v-model="formRow.type" :label="1" @change="changeType">群推</el-radio>
          <el-radio v-model="formRow.type" :label="2" @change="changeType">按会员等级推送</el-radio>
          <el-radio v-model="formRow.type" :label="3" @change="changeType">单用户推送</el-radio>
        </el-form-item>
        <el-form-item label="会员等级" v-if="formRow.type==2">
          <el-select v-model="formRow.id" placeholder="请选择">
            <el-option
              v-for="item in userlevel"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户电话" v-if="formRow.type==3">
          <el-select
            v-model="formRow.id"
            filterable
            remote
            reserve-keyword
            placeholder="请输入用户电话进行搜索"
            :remote-method="remoteMethod"
            :loading="loading">
            <el-option
              v-for="item in userphone"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item> -->
          <el-button type="primary" :loading="addStatus" @click="submitForm">推送</el-button>
        <!-- </el-form-item> -->
      </el-form>
    </el-dialog>
    <!--列表数据添加/编辑结束  -->
  </div>
</template>

<script>
import { getMsgList, addMsg, editMsg } from '@/api/msg'
import { getLevList, getUserList } from '@/api/member'
import Pagination from '@/components/Pagination'
import { Message } from 'element-ui'
export default {
  name: 'MsgList',
  components: { Pagination },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      searchcontent: '', // 搜索内容
      searchdate: '', // 搜索日期
      // 日期插件参数
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      // 弹窗标题
      dialogTitle: '',
      dialogFormVisible: false,
      // 表单数据
      formRow: {
        title: '',
        content: '',
        type: 1,
        id: 0
      },
      userlevel: [],
      userphone: [],
      loading: false,
      addStatus: false
    }
  },
  created() {
    this.getList()
  },
  methods:{
    getList() {
      this.listLoading = true
      const search = { searchcontent: this.searchcontent }
      if (this.searchdate) {
        const startDate = this.searchdate[0]
        const endDate = this.searchdate[1]
        search.startDate = startDate
        search.endDate = endDate
      }
      const postdata = { ...this.listQuery, ...search }
      getMsgList(postdata).then((response) => {
        const { data } = response
        console.log(response, 'getMsgList')
        this.list = data.list
        this.total = data.total
        this.listLoading = false
      })
    },
    // 添加
    addShow() {
      this.formRow = {
        title: '',
        content: '',
        type: 1,
        id: ''
      }
      this.dialogTitle = '添加推送'
      this.dialogFormVisible = true
      this.userlevel = []
      getLevList({page:1,limit:100000}).then(res=>{
        console.log(res)
        res.data.list.forEach(item=>{
          this.userlevel.push({
            value: item.id,
            label: item.levelname_zn+'('+item.levelname+')'
          })
        })
      })
    },
    //选择类型
    changeType(e) {
      this.formRow.id=''
    },
    //远程搜索用户
    remoteMethod(e){
      console.log(e)
      if (e !== '') {
        this.loading = true;
        let users = []
        getUserList({page:1,limit:10000,searchcontent:e}).then(res=>{
          console.log(res)
          res.data.list.forEach(item=>{
            users.push({
              value: item.id,
              label: item.contact+'('+item.username+')'
            })
          })
          this.userphone = users
          this.loading = false;
        })
      } else {
        this.userphone = [];
      }
    },
    // 编辑
    // editShow(row) {
    //   this.formRow = row
    //   this.dialogTitle = '编辑公告'
    //   this.dialogFormVisible = true
    // },
    // 表单提交方法
    submitForm(formName) {
      // console.log(this.formRow, 'submitForm')
      // if (!this.formRow.id) { // 新增数据
      // if(!this.addStatus){
      //   this.$message({
      //     message: '正在推送，请稍等',
      //     type: 'warning'
      //   })
      //   return
      // }
      if(!this.formRow.title){
        this.$message({
          message: '请填写推送标题',
          type: 'warning'
        })
        return
      }
      if(!this.formRow.content){
        this.$message({
          message: '请填写推送内容',
          type: 'warning'
        })
        return
      }
      this.addStatus = true
      if(this.formRow.type==1){
        this.formRow.id=0
      }
      addMsg(this.formRow).then(res => {
        Message({
          message: '保存成功',
          type: 'success',
          duration: 2 * 1000
        })
        this.addStatus = false
        this.dialogFormVisible = false
        this.getList()
      })
      // } else { // 编辑数据
      //   editMsg(this.formRow).then(res => {
      //     Message({
      //       message: '保存成功',
      //       type: 'success',
      //       duration: 2 * 1000
      //     })
      //     this.dialogFormVisible = false
      //     this.getList()
      //   })
      // }
    },
  }
}
</script>

<style>
</style>
